Home:ALL Converter>How to add third-party services in lazy-load module in Angular? On example of TranslateService(@ngx-translate) and OverlayModule

How to add third-party services in lazy-load module in Angular? On example of TranslateService(@ngx-translate) and OverlayModule

Ask Time:2020-01-15T20:59:08         Author:Larest

Json Formatter

There is fork of "Minko Gechev" Route-level code splitting in Angular sample app with Translation and Overlay injections.

import { Component, OnInit, Injectable } from '@angular/core';
import { CookieService } from "ngx-cookie-service";
import { ComponentType, Overlay, OverlayConfig } from "@angular/cdk/overlay";

import { TranslateService } from "@ngx-translate/core";

@Injectable({
  providedIn: 'root'
})
export class OverlayService {

  constructor(public overlay: Overlay) {}
}


@Component({
  selector: 'app-nyan',
  template: '<img src="/assets/nyan.png">',
  styleUrls: ['./nyan.component.css']
})
export class NyanComponent implements OnInit {

  constructor(
    private cookieService:CookieService,
    private translateService:TranslateService,
    //private overlayService: OverlayService
  ){
     // No provider for Overlay! trouble 
    //  const overlayRef = this.overlayService.overlay.create();
    //  //touch overlay
    //  console.log(overlayRef);

  }


  ngOnInit(): void {
    // it was same trouble for cookieService but it's gone
     const lang=this.cookieService.get('lang')||'en';
     //touch cookieService
     console.log(lang);

    this.translateService.setDefaultLang('en');
    this.translateService.use(lang);
    // NullInjectorError: No provider for TranslateStore! patch from https://gitmemory.com/issue/ngx-translate/core/883/532257699
    // does not work.
    this.translateService.store.onLangChange.subscribe((lang) => this.translateService.use(lang));

  }

}

The error I got was:

"Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[TranslateService -> TranslateStore]: in lazy module

or

"ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[InjectionToken cdk-connected-overlay-scroll-strategy -> Overlay]: StaticInjectorError(Platform: core)[InjectionToken cdk-connected-overlay-scroll-strategy -> Overlay]: NullInjectorError: No provider for Overlay!"

for version of "Overlay components uncommented".

Here is a stackblitz.

Author:Larest,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/59751963/how-to-add-third-party-services-in-lazy-load-module-in-angular-on-example-of-tr
Valentin Buriakov :

To use TranslateService in lazy modules you should first add in your AppModule: \nimports: [TranslateModule.forRoot(), HttpClientModule]\n\nUsing forRoot will inject TraslateService on your app-level as singleton.\n\nAnd for using Overlay in your OverlayService you should remove providedIn: 'root'; and add OverlayService to your NyanModule providers:\n\n providers:[\n CookieService,\n OverlayService\n ]\n\n\nBecause for using OverlayModule which is imported in your lazy module, this service should be a part of this module. ",
2020-01-15T14:38:38
Fahad Hassan :

It seems like you didn't include TranslateService in your app.module.ts providers array like this\n\nproviders : [TranslateService, TranslateStore ]\n",
2020-01-15T13:05:41
yy